<template>
	<view class="container popup popup--fixed flex--col" v-show="visible" @click.stop="visible=false">
		<view class="notice-detail flex--col">
			<view class="notice-detail-info flex--col">
				<text class="text--main-dark">出行消息</text>
				<view class="travel-content--info flex--col">
					<view class="travel-content-item travel-partners">
						<image src="@/static/comment/people.svg" aria-label="出行双方" class="icon--middle"></image>
						<text class="text--secondary-dark">{{noticeInfo.userName}},{{noticeInfo.volunteerName}}</text>
					</view>
					<view class="travel-content-item travel-reason" v-show="noticeInfo.type === 2">
						<text class="text--secondary-dark--heavy">取消理由</text>
						<text class="text--secondary-dark">{{noticeInfo.refuseReason}}</text>
					</view>
					<view class="travel-content-item travel-contact">
						<text class="text--secondary-dark--heavy">联系电话</text>
						<text class="text--secondary-dark">19382982393</text>
					</view>
					<view class="travel-content-item travel-date">
						<text class="text--secondary-dark--heavy">出游日期</text>
						<text class="text--secondary-dark">{{noticeInfo.date}}</text>
					</view>
					<view class="travel-content-item travel-time flex--row">
						<view class="travel-content-item">
							<text class="text--secondary-dark--heavy">碰面时间</text>
							<text class="text--secondary-dark">{{noticeInfo.startTime}}</text>
						</view>
						<view class="travel-content-item">
							<text class="text--secondary-dark--heavy">结束时间</text>
							<text class="text--secondary-dark">{{noticeInfo.endTime}}</text>
						</view>
					</view>
					<view class="active"  v-show="noticeInfo.type === 3">
						<view class="travel-content-item travel-date">
							<text class="text--secondary-dark--heavy">出游日期</text>
							<text class="text--secondary-dark">{{noticeInfo.newDate}}</text>
						</view>
						<view class="travel-content-item travel-time flex--row">
							<view class="travel-content-item">
								<text class="text--secondary-dark--heavy">碰面时间</text>
								<text class="text--secondary-dark">{{noticeInfo.newStartTime}}</text>
							</view>
							<view class="travel-content-item">
								<text class="text--secondary-dark--heavy">结束时间</text>
								<text class="text--secondary-dark">{{noticeInfo.newEndTime}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="notice-detail-picture flex--row">
					<image aria-label="消息图片,仅做装饰用" :src="noticeTypeInfo.img"></image>
					<text class="text--main-dark">{{noticeTypeInfo.message}}</text>
				</view>
			</view>
			<view class="notice-button text--secondary-dark--heavy" v-show="!noticeInfo.isRead" @click="confirmNotice" role="button">
				确认消息
			</view>
			<PopupClose @close="visible=false"></PopupClose>
		</view>
		<view class="popup--absolute popup--notice-detail flex--row">
		</view>
	</view>
	
</template>

<script>
	import PopupClose from "@/components/PopupClose/PopupClose.vue"
	export default {
		props:['noticeInfo','noticeTypeInfo'],
		emits:['confirmNotice'],
		components:{
			PopupClose
		},
		data(){
			return {
				visible:false
			}
		},
		methods:{
			open(){
				this.visible = true
			},
			confirmNotice(){
				this.$emit('confirmNotice')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.text--main-dark{
		font-size: 24px;
		font-weight: 700;
		color:#333;
	}
	
	.text--secondary-dark--heavy{
		font-size: 18px;
		font-weight: 700;
		color:#333;
	}
	.text--secondary-dark{
		font-size: 18px;
		font-weight: 500;
		color:#333;
	}
	
	.text--thirdary-dark{
		font-size: 16px;
		color:#666;
	}
	
	.container{
		height:100vh;
		width:100vw;
		left:0;
		top:0;
		background-color: transparent;
		
		justify-content: center;
		align-items: center;
	}
	
	.popup--notice-detail{
		height: 100vh;
		width: 100vw;
		backdrop-filter: blur(5px);
		top:0;
		left:0;
		z-index: 1;
		
		justify-content: center;
		align-items: center;
	}
	
	.notice-detail{
		width:90%;
		justify-content: flex-start;
		align-items: center;
		z-index:99;
		gap:18px;
		
		&-info{
			box-sizing: border-box;
			width:100%;
			padding:16px;
			background-color: #fff;
			gap:16px;
			@include border-four-roundings;
			
			.notice-detail-picture{
				align-items: center;
				image{
					width:96px;
					height:96px;
				}
			}
		}
		
		.travel-content--info{
			gap:12px;
			
			.travel-content-item{
				display: flex;
				align-items: center;
				gap:8px;
			}
			
			.travel-time{
				justify-content: space-between;
			}
			& .active text{
				color:$main-color--dark;
			}
		}
		
	}
	
	.notice-button{
		padding:16px;
		@include border-four-roundings;
		background-color: #fff;
	}
	
	
	
</style>